<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美女相册</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<div class="container">
			<h1 class="title">美女相册</h1>
			<ul class="smallImgs">
				<li><img id="small1" src="images/1.jpg" alt="" /></li>
				<li><img id="small2" src="images/2.jpg" alt="" /></li>
				<li><img id="small3" src="images/3.jpg" alt="" /></li>
				<li><img id="small4" src="images/4.jpg" alt="" /></li>
			</ul>
			<div class="bigImg">
				<img id="big" src="images/1.jpg" alt="" />
			</div>
			<script>
				/* 
				 1、一定有点击事件
				 2、获取 和 设置 属性
				 */
				
				// 获取标签
				var img1 = document.querySelector("#small1")
				var img2 = document.querySelector("#small2")
				var img3 = document.querySelector("#small3")
				var img4 = document.querySelector("#small4")
				var imgbig =  document.querySelector("#big")
				
				// 添加点击事件
				img1.onclick = function(){
					imgbig.src = img1.src;
				}
				
				img2.onclick = function(){
					imgbig.src = img2.src;
				}
				
				img3.onclick = function(){
					imgbig.src = img3.src;
				}
				img4.onclick = function(){
					imgbig.src = img4.src;
				}
			</script>
		</div>
	</body>	
</html>
